<template>
    <div class="bigbox">
        <div>
            <h1>商品列表</h1>
        </div>
        <div>
            <div class="search-box">
                <input type="text" placeholder="请输入关键内容" v-model="data.keyword">
                <input type="button" value="搜 索" @click="searchProtect">
                <input type="button" value="添 加" @click="$router.push({ name: 'add' })">
            </div>


            <table>
                <thead>
                    <tr>
                        <th>编号</th>
                        <th>商品名称</th>
                        <th>价格</th>
                        <th>数量</th>
                    </tr>
                </thead>

                <tbody>
                    <tr v-for="protect in data.protects" :key="protect.id">
                        <td>{{ protect.id }}</td>
                        <td>{{ protect.protectName }}</td>
                        <td>{{ protect.protectPrice }}</td>
                        <td>{{ protect.protectNum }}</td>

                        <td>
                            <div class="action-buttons">
                                <input type="button" value="编辑" @click="$router.push({ name: 'update', params: { id: protect.id } })">
                                <input type="button" value="删除" @click="confirmDel(protect.id)">
                            </div>

                        </td>
                    </tr>
                </tbody>
            </table>

        </div>
    </div>
</template>

<script setup>
import axios from "axios";
import { onMounted, reactive } from 'vue'

const api = 'http://localhost:3000'

const data = reactive({
    protects: [],
    keyword: ''
})

//查询全部
function queryAllProtect() {
    console.log(data.keyword);

    axios.get(`${api}/protects?keyword=${data.keyword}`).then((res) => {
        data.protects = res.data.data // 将查询结果赋值给 
    })
}

function searchProtect() {
    queryAllProtect()
}

//确认删除
function confirmDel(id) {
    const isConfirmed = window.confirm('真的要删除这个商品吗？')
    if (isConfirmed) {
        delProtect(id)
    }
}

//删除
function delProtect(id) {
    axios.delete(`${api}/protect/${id}`).then(() => {
        queryAllProtect()//删除后重新查询
    })
}



//组件挂载时调用查询函数
onMounted(() => {
    queryAllProtect()
})
</script>

<style scoped>
/* 这里可以添加样式 */
.bigbox {
    font-family: Arial, sans-serif;
    max-width: 800px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
}

h1 {
    text-align: center;
    color: #333;
}

.search-box {
    display: flex;
    margin-bottom: 20px;
}

.search-box input[type="text"] {
    flex: 1;
    padding: 8px;
    margin-right: 10px;
    border: 1px solid #ccc;
    border-radius: 4px;
}

.search-box input[type="button"] {
    padding: 8px 15px;
    border: none;
    border-radius: 4px;
    background-color: #4CAF50;
    color: white;
    cursor: pointer;
}

.search-box input[type="button"]:hover {
    background-color: #45a049;
}

table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 20px;
}

th,
td {
    padding: 12px;
    text-align: left;
    border-bottom: 1px solid #ddd;
}

th {
    background-color: #f2f2f2;
    font-weight: bold;
}

tr:hover {
    background-color: #f5f5f5;
}

.action-buttons {
    display: flex;
    gap: 10px;
}

.action-buttons input[type="button"] {
    padding: 6px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin: 0;
}

.edit-btn {
    background-color: #2196F3;
    color: white;
}

.edit-btn:hover {
    background-color: #0b7dda;
}

.delete-btn {
    background-color: #f44336;
    color: white;
}

.delete-btn:hover {
    background-color: #d32f2f;
}
</style>